<template>
  <div id="lay-out">
    <div class="status-bar">
      <div id="time" class="time"></div>
      <!-- 保留一个状态栏图标 -->
      <img src="./public/img/status_1.png" alt="状态栏图标" />
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "lay-out",
  data() {
    return {
      isRunning: false,
      animationFrameId: null
    };
  },
  mounted() {
    this.isRunning = true;
    this.getTime();
  },
  beforeDestroy() {
    this.isRunning = false;
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
  },
  methods: {
    getTime() {
      if (!this.isRunning) return;
      
      window.setTimeout(() => {
        this.animationFrameId = window.requestAnimationFrame(() => this.getTime());
      }, 500);
      
      const d = new Date();
      const month = d.getMonth() + 1;
      const days = d.getDate();
      const day = d.getDay();
      const hour = d.getHours();
      const minute = d.getMinutes();
      const second = d.getSeconds();
      
      const formattedTime = `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
      
      const week = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ];
      
      const timeElement = document.getElementById("time");
      if (timeElement) {
        timeElement.innerHTML = formattedTime;
      }
    }
  }
};
</script>
<style>
#lay-out {
  width: 100%;
  height: 100%;
  margin: 0;
}
#lay-out .status-bar {
  position: fixed;
  height: 3%;
  width: 100%;
  margin: 0;
  background-color: transparent;
  z-index: 10;
}
#lay-out .status-bar .time {
  height: 100%;
  margin-top: 1%;
  margin-left: 2%;
  font-size: 16px;
  font-weight: bolder;
  float: left;
}
#lay-out .status-bar img {
  float: right;
  margin-top: 1.5%;
  margin-right: 2%;
  height: 60%;
}
</style>